<template>
	<view>
		<MySearch></MySearch>
		<view class="cate">
			<scroll-view scroll-y="true" class="cate-left">
				<view class="cate-left-item" v-for="(item, index) in leftList" :class="{active: activeIndex === index}" @click="click(index)" :key="item.cat_id">{{item.cat_name}}</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="cate-right" :scroll-into-view="'biaoji'+ activeIndex">
				<view :id="'biaoji'+ activeIndex"></view>
				<view class="group" v-for="item in rightList" :key="item.cat_id">
					<view class="group-title">{{ item.cat_name }} </view>
					<view class="group-list" >
						<navigator class="list-item" v-for="goods in item.children" :key="goods.cat_id"
							:url="`/pages/goods_list/goods_list?cid=${goods.cat_id}&query=${goods.cat_name}`"
							open-type="navigate"
						>
							<image
								:src="goods.cat_icon"
								mode="aspectFit"
								lazy-load
							/>
							<text>{{ goods.cat_name }}</text>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex:0,
				// 所有的数据
				cateList:[]
			}
		},
		onLoad(options) {
			this.getCateList()
		},
		methods: {
			async getCateList(){
				const [error,res] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
					method: 'GET'
				})
				if(!error){
					console.log(res)
					this.cateList = res.data.message
				}
			},
			click(index){
				this.activeIndex = index
				
			}
		},
		computed:{
			leftList(){
				return this.cateList.map(({cat_name,cat_id})=>({cat_name,cat_id}))
			},
			rightList(){
				return this.cateList.length>0 ? this.cateList[this.activeIndex].children.map(item=>item):[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cate{
		display: flex;
		.cate-left{
			
			width: 182rpx;

			height: calc(100vh - 88rpx);
			/* #ifdef H5 */
			height: calc(100vh - 88rpx - 50px - 44px);
			/* #endif */
			.cate-left-item{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				font: 28rpx;
				background-color: #f3f3f3;
			}
			.active{
			color: red;
			background-color: #fff;
			position: relative;
			&::before {
				content: '';
				width: 4rpx;
				height: 44rpx;
				background-color: red;
				position: absolute;
				left: 0;
			}
		}
		}
		.cate-right{
			flex: 1;
			height: calc(100vh - 88rpx);
			/* #ifdef H5 */
			height: calc(100vh - 88rpx - var(--window-top) - var(--window-bottom));
			/* #endif */
			.group{
				.group-title{
					
					height: 100rpx;
					line-height: 100rpx;
					font-size: 26rpx;
					text-align: center;
					margin-top: 20rpx;
					&::before,&::after{
						content: '/';
						color:#ccc;
						margin: 0 10rpx;
					}
				}
				.group-list{
					display: flex;
					flex-wrap: wrap;
					navigator{
						width:33.3333%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						padding: 20rpx 0;
					}
					image{
						display: block;
						width: 120rpx;
						height: 120rpx;
					}
					text{
						font-size: 22rpx;
					}

				}
			}
			
		}
		
	}



</style>
